<template>
	<div class="img-border">
		<el-image :src="img.src" fit="fit" lazy placeholder="图片加载错误" @click="changeCurrentImg(img)">
			<div slot="placeholder" class="placeholder-block"></div>
		</el-image>
	</div>
</template>

<script>
export default{
	data(){
		return {
			width: Number.parseInt(this.img.size.split('×')[0]),
			height: Number.parseInt(this.img.size.split('×')[1])
		}
	},
	methods:{
		// 切换当前图片
		changeCurrentImg(newImg){
			this.$store.commit("setCurrentImg", newImg);
			this.$store.commit("changeShowImage");
		}
	},
	props:["img"]
}
</script>

<style scoped>
	.el-image{
		border-radius: 4%;
		margin: 5px;
		box-shadow: 4px 0px 8px 0px #a4a8ab;
		width: 100%;
	}
	.el-image:hover{
		transform: scale(1.2);
		margin: 5px;
		transition: border-radius 0.5s, transform 2s;
	}
	.img-border{
		overflow: hidden;
		border-radius: 4%;
	}
	.placeholder-block{
		background-color: #8bb9a3;
		width: 100%;
		height: 600px;
	}
</style>
